<template>
    <div class = "Summary">
        <my-header :showBack="true" :title="$t('lang.ransactionQuery')"></my-header>
        <div class = "box">
            <!-- 选择模块 -->
            <div class ="time">
                <div class = "x-time" @click="Begin">
                    <div>{{$t('lang.startTime')}}</div>
                    <input type="text" :placeholder="$t('lang.chooseTime')" v-model="beginTime" disabled>
                </div>
                <div class = "x-time" @click="Begin1">
                    <div>{{$t('lang.endTime')}}</div>
                    <input type="text" :placeholder="$t('lang.chooseTime')" v-model="endTime" disabled>
                </div>
                 <div class="submit" @click="getInformation">
                     {{ $t('lang.clickQuery') }}
                 </div>
            </div>
            <div class = "api">
                <aside>
                    <van-cell-group>
                        <van-field
                            value="输入框已禁用"
                            label="用户名"
                            disabled
                        />
                    </van-cell-group>
                    <van-cell-group>
                        <van-field
                            value="输入框已禁用"
                            label="用户名"
                            disabled
                        />
                    </van-cell-group>
                    <van-cell-group>
                        <van-field
                            value="输入框已禁用"
                            label="用户名"
                            disabled
                        />
                    </van-cell-group>
                </aside>
            </div>
        </div>
        <van-popup v-model="show" position="bottom" :overlay="false" class = "shade">
            <van-datetime-picker
                v-model="currentDate"
                type="date"
                confirm-button-text = "确认"
                @confirm = "getTime"
            />
        </van-popup>
        <van-popup v-model="show1" position="bottom" :overlay="false" class = "shade">
            <van-datetime-picker
                v-model="currentDate"
                type="date"
                confirm-button-text = "确认"
                @confirm = "getEndTime"
            />
        </van-popup>
        <div class="no_data" v-show="Arr.length==0"><img src="../../assets/img/my/nodata.png" alt="" srcset="">{{$t("lang.NoData")}}</div>
    </div>
</template>

<script>
import header from "@/components/header";
import { Toast } from 'vant';
export default {
    components: {
        "my-header": header,
    }, 
    data(){
        return{
            show: false,
            show1:false,
            currentDate:"",
            beginTime:null,
            endTime:null,
            // 用来接受数据
            Arr:[],
        }
    },
    methods:{
        // 选择开始的时间
        Begin(){
            this.show = !this.show;
            if(this.show1 == true){
                this.show1=false
            }
        },
        // 选择结束的时间
        Begin1(){
            this.show1 = !this.show1;
            if(this.show == true){
                this.show=false
            }
        },
        // 开始的时间进行转换 转换成2019-01-01类型
        getTime(){
            console.log(this.currentDate)
            var d = new Date(this.currentDate)
            let M= (d.getMonth() + 1);
            if(M<10){
                M='0'+M;
                console.log(M)
            }
            let D = d.getDate();
            if(D<10){
                D='0'+D;
            }
            var a = d.getFullYear() + '-' + M + '-' + D;
            this.beginTime = a;
            this.show = !this.show;
        },
        // 结束时间转换  转换同上
        getEndTime(){
            console.log(this.currentDate)
            var d = new Date(this.currentDate)
            let M= (d.getMonth() + 1);
            if(M<10){
                M='0'+M;
                console.log(M)
            }
            let D = d.getDate();
            if(D<10){
                D='0'+D;
            }
            var a = d.getFullYear() + '-' + M + '-' + D;
            this.endTime = a;
            this.show1 = !this.show1;
        },
        // 拿到结束时间 开始时间  和token 然后进行axios进行发送
        getInformation(){
            let endTime =  this.endTime;
            let beginTime = this.beginTime;
            let token=window.localStorage.token;
            if(this.endTime !=null && this.endTime !='NaN-NaN-NaN' && this.beginTime !=null && this.beginTime !='NaN-NaN-NaN' ){
                this.$ajax(this.$api.getNum,{token,beginTime,endTime,}).then(res => {
                    this.Arr= res.msg
                    console.log(this.Arr)
                });
            }else{
                Toast.fail('请选择有效时间');
            }
        }
    }
}
</script>

<style lang="less" scoped>
    .api{
        width:100%;
        height:20px;
        background:red;
        aside{
            padding:20px;
            background:yellow;
        }
    }
    .shade{
        height:250px;
        width:100%;
    }
    .time{
        background:#fff;
        overflow: hidden;
        height:150px;
        padding: 10px 15px;
        .x-time{
            border-bottom:1px solid #eee;
            height:24px;
            padding-top:10px;
            display: flex;
            div{
                width:100px;
                height:24px;
                line-height:24px;
                font-size:12px;
            }
            input{
                border:0px;
                height:24px;
                flex:1;
                padding-left:10px;
                background:#fff;
            }
        }
        .submit{
            height:44px;
            width:100%;
            background:#841f1f;
            border-radius: 20px;
            color:#fff;
            line-height: 44px;
            margin-top:20px;
            text-align:center;
        }
    }
    .centerBox{
            padding: 0px 15px 10px;
            .center{
                border-bottom:1px solid #eee;
                padding-bottom:10px;
                aside{
                    display: flex;
                    article{
                        width:50%;
                        height:25px;
                    }
                    section{
                        flex:1;
                        height:25px;
                        color:red;
                        span{
                            font-size:12px;
                        }
                        &.Money{
                            color:red;
                        }
                    }
                }
            }
        }
    .no_data{
        overflow: hidden;
        position: relative;
        top:20%;
    }
</style>

